<template>
  <div class="shoucang">
    <div class="shoucang-header">
      <van-nav-bar
        title="我的收藏"
        left-text="返回"
        left-arrow
        fixed
        @click-left="back"
      />
    </div>
    <!-- 背景 -->
    <div class="shoucang-box"></div>
    <div class="shoucang-top-box">
      <div class="shoucang-item">
        <div
          class="sc-content"
          v-for="(item, index) in AllSelectionData"
          :key="index"
          @click="delOrDet(item.pid, $event, index)"
        >
          <Product :pro="item">
            <template #del>
              <van-icon class="del" name="delete-o" />
            </template>
          </Product>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Product from "../components/Product.vue";
export default {
  name: "toShouCang",
  data() {
    return {
      AllSelectionData: [],
    };
  },
  components: {
    Product,
  },
  created() {
    this.getSelectionData();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    delOrDet(pid, event, index) {
      // e.target 当前点击的元素
      // e.currentTarget 绑定事件的元素
      if (event.target.className == "auto-img") {
        this.toDetail(pid);
      } else if (event.target.className == "del van-icon van-icon-delete-o") {
        this.delectSelectionData(pid, index);
      }
    },
    //点击跳转商品详情
    toDetail(pid) {
      this.$router.push({ name: "Detail", query: { pid } });
    },
    //删除收藏
    delectSelectionData(pid, index) {
      let token = sessionStorage.getItem("token");

       this.axios({
        method: "POST",
        url: "/notlike",
        data: {
          pid,
          token 
        }
      })
        .then(res => {
          this.$toast(res.data.msg)
          if (res.data.code === 900) {
            this.AllSelectionData.splice(index, 1);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取收藏商品
    getSelectionData() {
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "get",
        url: "/findAllLike",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          if (res.data.code == 700) {
            //用户未登录, 拦截操作, 通知用户去登录
            this.$toast("请先登录");
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
            return;
          }

          if (res.data.code === 2000) {
            this.AllSelectionData = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>


<style lang="less" scoped>
.shoucang {
  /deep/ .shoucang-header > .van-nav-bar .van-icon {
    margin-left: 0;
  }

  .shoucang-box {
    height: 160px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #0c34ba;
  }
  .shoucang-top-box {
    min-height: 20px;
    margin: 0 10px;
    // background-image: linear-gradient(
    //   to bottom,
    //   rgba(255, 255, 255, 0.45) 0px,
    //   rgba(255, 255, 255, 0.45) 45px,
    //   #fff
    // );
    background-color: #fff;
    position: relative;
    top: -60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
  }
  /deep/ .sc-content {
    width: calc(~"30%");
    margin-left: 9px;
    margin-top: 10px;
  }
  .shoucang-item {
    display: flex;
    flex-wrap: wrap;
  }
  /deep/ .van-icon {
    margin-left: 45px;
    color: #c0c0c0;
  }
}
</style>